<template>
  <el-row justify="center">
    <el-col :span="15">
      <h1 id="住宿需求">住宿需求</h1>
      <el-form ref="form" :model="needsForm" label-width="100px" label-position="right">
        <template v-if="editable||hasData">
          <el-form-item label="入住/退房形式">
            <el-col>
              <template v-if="editable">
                <el-radio-group v-model="needsForm.checkInWay">
                  <el-radio :label="false">同批次入住/退房</el-radio>
                  <el-radio :label="true">分批次入住/退房</el-radio>
                </el-radio-group>
              </template>
              <template v-else>
                {{checkWay(needsForm.checkInWay)}}
              </template>
            </el-col>
          </el-form-item>
        </template>
        <el-form-item label="住宿需求">
          <template v-if="editable||hasData">
            <el-form class="check-form">
              <el-form-item v-for="(date,index) in dates" :label="moment(date).format('MM-DD')" :key="index">
                <el-table v-if="checkDate(date).length > 0" :data="checkDate(date)" border header-cell-class-name="table-header">
                  <el-table-column
                      prop="build.name"
                      align="center"
                      label="楼栋"
                      :resizable="false">
                  </el-table-column>
                  <el-table-column
                      prop="roomType.name"
                      align="center"
                      label="房型"
                      :resizable="false">
                  </el-table-column>
                  <el-table-column
                      prop="roomWay.name"
                      align="center"
                      label="开房方式"
                      :resizable="false">
                  </el-table-column>
                  <el-table-column
                      prop="amount"
                      align="center"
                      label="需求数量"
                      :resizable="false">
                  </el-table-column>
                  <el-table-column
                      prop="other"
                      align="center"
                      label="备注"
                      :resizable="false">
                  </el-table-column>
                  <template v-if="editable">
                    <el-table-column
                        align="center"
                        label="操作"
                        :resizable="false">
                      <template v-slot:default="scope">
                        <el-button type="text" style="color: red" @click="removeCheckInfo(index,scope.$index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </template>
<!--                  <template v-if="approve">-->
<!--                    <el-table-column-->
<!--                        align="center"-->
<!--                        label="系统判定结果"-->
<!--                        :resizable="false">-->
<!--                      <template v-slot:default="scope">-->
<!--                        <template v-for="i in checkRoomBySys(index,scope.$index)" :key="i.index">-->
<!--                          <div :class="i.status">{{i.info}}</div>-->
<!--                        </template>-->
<!--                      </template>-->
<!--                    </el-table-column>-->
<!--                  </template>-->
                </el-table>
                <template v-else>
                  <template v-if="!editable">
                    无
                  </template>
                </template>
                <template v-if="editable">
                  <el-button type="text" @click="addCheckInfo(index)">添加</el-button>
                </template>
              </el-form-item>
            </el-form>
          </template>
          <template v-else>
            无
          </template>
        </el-form-item>
<!--        <template v-if="editable">-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" plain @click="checkRoom">校验房间数量是否满足需求</el-button>-->
<!--            <span class="tips" :class="{fail:!success}">{{ tips }}</span>-->
<!--          </el-form-item>-->
<!--        </template>-->
        <el-form-item label="住宿需求明细">
          <template v-if="editable">
            <el-input v-model="needsForm.detail" type="textarea" :rows="5" placeholder="若无住宿需求或对以上住宿需求有补充，请在此备注说明"></el-input>
          </template>
          <template v-else>
            {{needsForm.detail}}
          </template>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!--新增住宿的对话框-->
  <add-acc-needs-dialog :visible="visible" @submit="submitAcc" @close="visible = false"></add-acc-needs-dialog>
</template>

<script>
import AddAccNeedsDialog from "@/components/AddAccNeedsDialog";
import moment from "moment";

export default {
  name: "AccNeedsForm",
  components:{AddAccNeedsDialog},
  props: {
    modelValue:Object,
    editable:Boolean,
    approve:Boolean,
    dates:Array
  },
  emits: ['update:modelValue'],
  data(){
    return{
      tips:'房间数量不足',
      success: false,
      visible:false,
      currentIndex: 0,
    }
  },
  computed:{
    needsForm:{
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
    hasData(){
      return this.needsForm.detailList.length > 0
    }
  },
  methods:{
    checkRoom(){
      this.success = !this.success;
    },
    addCheckInfo(tableIndex){
      this.currentIndex = tableIndex;
      this.currentDate =
      this.visible = true;
    },
    submitAcc(form){
      form.date = this.dates[this.currentIndex];
      this.needsForm.detailList.push(Object.assign({},form));
      this.visible = false;
    },
    removeCheckInfo(tableIndex,index){
      this.needsForm.detailList.splice(index,1);
    },
    checkRoomBySys(tableIndex,index){
      if(index === 0 && tableIndex === 0){
        return [{status:'success',info:'满足需求'}];
      }
      return [{status:'error',info:'余房不足'}];
    },
    checkDate(date){
      return this.needsForm.detailList.filter((currentValue)=>{
        return moment(currentValue.date).isSame(moment(date));
      })
    },
    moment(date){
      return moment(date);
    },
    checkWay(way){
      if(way){
        return "同批次入住/退房"
      }else{
        return "分批次入住/退房"
      }
    }
  }
}
</script>

<style scoped>
.check-form{
  padding: 40px;
  background-color: #EDEEF2;
}
.tips{
  padding-left: 20px;
}
.fail{
  color: red;
}
.el-table{
  /*width: 550px;*/
}
</style>